<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="http://apps.bdimg.com/libs/jqueryui/1.10.4/css/jquery-ui.min.css">

    <title>Document</title>
    <style>
        #a {
            width: 100px;
            height: 100px;
            background-color: aqua;
        }
        
        #b {
            width: 100px;
            height: 100px;
            background-color: red;
        }
        
        #c {
            position: absolute;
            left: 500px;
            background-color: rebeccapurple;
            width: 100px;
            top: 0;
            height: 100px;
        }
    </style>
</head>

<body>
    <div id="a"></div>
    <div id="b"></div>

    <div id="c"></div>
</body>
<script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script>
    //
    /*
        动画函数    animate(修改属性数组,持续时间,回调函数,"动画效果的快慢"); 方法重载
     */
    $(() => {
        $('#a').hover(function() {
            $('#b').animate({
                width: 200,
                height: 200,
                // opacity: 0
            }, 2000, "easeInOutBounce");
            $('#c').animate({
                top: 400,
            }, 2000, "easeOutBounce");
        }, function() {
            $('#b').animate({
                // opacity: 1,
                width: 100,
                height: 100,
            }, 2000);
            $('#c').animate({
                top: 0,
            }, 2000, "easeOutBounce");
        })



    })
</script>

</html>